<script setup>
import { ElMessage } from "element-plus";
import Layer from "@/components/layer/index.vue";
import { defineProps, ref, defineEmits } from "vue";
import { addAPI, updateAPI } from "@/api/wedding/amountInfo";

// 使用defineEmits来接收来自父组件的方法
const emit = defineEmits(["getTableData"]);
// 声明props
const props = defineProps({
  layer: {
    type: Object,
    default: () => {
      return {
        show: false,
        title: "",
        showButton: true,
      };
    },
  },
});

/************************************定义变量************************************************/
const ruleForm = ref(null);
const layerDom = ref(null);
const rules = {
  // userId: [{ required: true, message: '请输入用户id', trigger: 'blur' }],
  // amount: [{ required: true, message: '请输入余额', trigger: 'blur' }],
  changeAmount: [{ required: true, message: "请输入变动金额", trigger: "blur" }],
  // changeType: [{ required: true, message: '请输入变动类型 0:收入 1:支出 2:提现', trigger: 'blur' }],
  // changeDetails: [{ required: true, message: '请输入变动详情', trigger: 'blur' }],
  // cashStatus: [{ required: true, message: '请输入提现状态', trigger: 'blur' }],
  // createTime: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
  // updateTime: [{ required: true, message: '请输入修改时间', trigger: 'blur' }],
  // delFlag: [{ required: true, message: '请输入删除标识：0:未删除  1:已删除', trigger: 'blur' }],
};
let form = ref({
  id: null,
  userId: null,
  amount: null,
  changeAmount: null,
  changeType: null,
  changeDetails: null,
  cashStatus: null,
  createTime: null,
  updateTime: null,
  delFlag: null,
});

/************************************数据回显************************************************/
if (props.layer.row) {
  if (props.layer.row) {
    let source = props.layer.row;
    Object.keys(form.value).forEach((k) => k in source && (form.value[k] = source[k]));
  }
}

/************************************定义事件************************************************/
//提交按钮事件
let submit = () => {
  if (ruleForm) {
    ruleForm.value.validate((valid) => {
      if (valid) {
        let params = form.value;
        if (props.layer.row) {
          updateForm(params);
        } else {
          addForm(params);
        }
      } else {
        return false;
      }
    });
  }
};

let updateForm = (params) => {
  updateAPI(params).then((res) => {
    ElMessage({
      type: "success",
      message: "编辑成功",
    });
    emit("getTableData", false);
    layerDom && layerDom.value.close();
  });
};

let addForm = (params) => {
  params.changeType = "2";
  addAPI(params).then((res) => {
    if (res.code != 0) {
      ElMessage({
        type: "error",
        message: res.msg,
      });
      return;
    }
    ElMessage({
      type: "success",
      message: "操作成功",
    });
    emit("getTableData", true);
    layerDom && layerDom.value.close();
  });
};
</script>

<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      style="margin-right: 30px"
    >
      <!-- <el-form-item label="用户id：" prop="userId">
        <el-input v-model="form.userId" placeholder="请输入用户id"></el-input>
      </el-form-item>
      <el-form-item label="余额：" prop="amount">
        <el-input-number size="large" v-model="form.amount" :precision="2" :step="0.1">
          <template #suffix><span>元</span></template>
        </el-input-number>
      </el-form-item> -->
      <div  style="font-weight: bolder;margin-bottom: 50px;margin-left: 20px">
        提现请先点击右上角名称，进入个人信息页面去完善银行卡信息
      </div>
      <el-form-item label="提现金额：" prop="changeAmount">
        <el-input-number
          size="large"
          v-model="form.changeAmount"
          :precision="2"
          :step="0.1"
        >
          <template #suffix><span>元</span></template>
        </el-input-number>
      </el-form-item>


      <!-- <el-form-item label="变动类型 0:收入 1:支出 2:提现：" prop="changeType">
        <el-input v-model="form.changeType" placeholder="请输入变动类型 0:收入 1:支出 2:提现"></el-input>
      </el-form-item>
      <el-form-item label="变动详情：" prop="changeDetails">
        <el-input v-model="form.changeDetails" placeholder="请输入变动详情"></el-input>
      </el-form-item>
      <el-form-item label="提现状态：" prop="cashStatus">
        <el-input v-model="form.cashStatus" placeholder="请输入提现状态"></el-input>
      </el-form-item>
      <el-form-item label="创建时间：" prop="createTime">
        <el-input v-model="form.createTime" placeholder="请输入创建时间"></el-input>
      </el-form-item>
      <el-form-item label="修改时间：" prop="updateTime">
        <el-input v-model="form.updateTime" placeholder="请输入修改时间"></el-input>
      </el-form-item>
      <el-form-item label="删除标识：0:未删除  1:已删除：" prop="delFlag">
        <el-input v-model="form.delFlag" placeholder="请输入删除标识：0:未删除  1:已删除"></el-input>
      </el-form-item> -->
    </el-form>
  </Layer>
</template>

<style scoped lang="scss">
.el-input-number--large {
  line-height: 38px;
  width: 230px;
}
</style>
